<template>
  <view class="mine-container" :style="{height: `${windowHeight}px;background-color: #F2F2F2;overflow-y: auto;`}">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="container flex align-center justify-between">
        <view class="flex align-center" style="margin-left: 40rpx;flex: 1">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              {{ name ? name : '微信用户' }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center" style="margin-right: 34rpx;">
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>
    <view class="content-section">
      <view class="item-box">
        <view class="order-list">
          <view @click="handleClickMenu(item)" v-for="(item,index) in marketingTab" :key="index"
                class="flex flex-column justify-center align-center state-item">
            <u-icon size="26" :name="item.icon"></u-icon>
            <view style="margin-top: 20rpx;">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="item-box">
        <view class="flex justify-between" style="margin-bottom: 20rpx;">
          <view class="left-title">服务设施</view>
          <view class="right-title flex align-center" @click="toOrder()">
            全部订单
            <u-icon name="arrow-right" size="11"></u-icon>
          </view>
        </view>
        <view class="order-list">
          <view @click="toOrder(index,item)" v-for="(item,index) in orderTab" :key="index"
                class="flex flex-column justify-center align-center state-item">
            <view class="icon-box">
              <u-icon size="26" :name="item.icon"></u-icon>
              <view v-if="item.num&&item.num!==0" class="num">{{ item.num }}</view>
            </view>
            <view style="margin-top: 20rpx;">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <!--   服务设施   -->
      <view class="item-box">
        <view class="flex justify-between" style="margin-bottom: 20rpx;">
          <view class="left-title">租客功能</view>
        </view>
        <view class="order-list">
          <view @click="handleClickMenu(item)" v-for="(item,index) in tenantTab" :key="index"
                class="flex flex-column justify-center align-center state-item">
            <view class="icon-box">
              <u-icon size="26" :name="item.icon"></u-icon>
              <view v-if="item.num&&item.num!==0" class="num">{{ item.num }}</view>
            </view>
            <view style="margin-top: 20rpx;">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <!--只有业主才能看到业主功能模块-->
      <view class="item-box" v-if="role.includes('PROPRIETOR')">
        <view class="flex justify-between" style="margin-bottom: 20rpx;">
          <view class="left-title">业主功能</view>
        </view>
        <view class="order-list">
          <view @click="handleClickMenu(item)" v-for="(item,index) in ownerTab" :key="index"
                class="flex flex-column justify-center align-center state-item">
            <view class="icon-box">
              <u-icon size="26" :name="item.icon"></u-icon>
              <view v-if="item.num&&item.num!==0" class="num">{{ item.num }}</view>
            </view>
            <view style="margin-top: 20rpx;">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view class="item-box">
        <view class="flex justify-between" style="margin-bottom: 20rpx;">
          <view class="left-title">其他</view>
        </view>
        <view class="order-list">

          <view class="flex flex-column justify-center align-center state-item" @click.stop="showAddMessage">
            <u-icon size="26"
                    name="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/note.png"></u-icon>
            <view style="margin-top: 20rpx;">添加留言</view>
          </view>
          <view class="flex flex-column justify-center align-center state-item kefu-wrapper">
            <button open-type="contact" class="fui-btn__contact"></button>
            <u-icon size="26" name="kefu-ermai"></u-icon>
            <view style="margin-top: 20rpx;">联系客服</view>
          </view>
          <view class="flex flex-column justify-center align-center state-item"
                @click="goto('/pages/mine/company/about-me')">
            <u-icon size="26"
                    name="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/about%402x.png"></u-icon>
            <view style="margin-top: 20rpx;">关于我们</view>
          </view>
          <view class="flex flex-column justify-center align-center state-item" @click="handleLogout">
            <u-icon size="26"
                    name="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/loginout.png"></u-icon>
            <view style="margin-top: 20rpx;">退出登录</view>
          </view>

        </view>
      </view>
    </view>
    <hxk-dialog ref="noteDialog">
      <view class="dialog__content" slot="content">
        <u-form
            labelPosition="left"
            :model="noteForm"
            ref="verificationForm"
            :rules="noteRules"
        >
          <u-form-item prop="messageContent">
            <u-textarea v-model="noteForm.messageContent" placeholder="请输入留言内容" count
                        maxlength="500"></u-textarea>
          </u-form-item>
        </u-form>
      </view>
    </hxk-dialog>
    <!--   自定义底部导航栏   -->
    <tab-bar/>
  </view>
</template>

<script>
import {countOrderState} from '@/api/order';
import {mapGetters} from 'vuex'
import {goto} from "@/utils/common";
import {addProprietorMessage} from "@/api/message/pushRecord";
import {contractCountSign} from "@/api/mine/contract";

export default {
  data() {
    return {
      orderTab: [
        {
          label: '待付款',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258652x.png',
          orderState: '101',
          key: '101',
          num: 99,
        },
        {
          label: '待入住',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258622x.png',
          orderState: '103',
          key: '103',
          num: 0,
        },
        {
          label: '已入住',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258632x.png',
          orderState: '106',
          key: '106',
          num: 0,
        },
        {
          label: '退房中',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258682x.png',
          orderState: '107',
          key: '107',
          num: 0,
        },
        {
          label: '退款/补缴',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258692x.png',
          orderState: '108',
          key: '104-107',
          num: 0,
        }
      ],
      // 营销相关功能
      marketingTab: [
        {
          label: '优惠券',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/coupon.png',
          type: 'page',
          url: '/pages/mine/coupon/index'
        },
        {
          label: '浏览记录',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/history.png',
          type: 'page',
          url: '/pages/mine/history/index'
        },
        {
          label: '我的收藏',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/collection.png',
          type: 'page',
          url: '/pages/mine/collection/index'
        }
      ],
      // 租客功能
      tenantTab: [
        {
          label: '入住信息',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/order/258722x.png',
          type: 'page',
          url: '/pages/main/checkMan/list'
        },
        {
          label: '我的合同',
          icon: "https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%88%91%E7%9A%84%E5%90%88%E5%90%8C%402x.png",
          type: 'page',
          url: '/pages/mine/other/my-contract/list',
          key: 'my-contract',
          num: 0
        },
        {
          label: '设施清单',
          icon: "https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%88%91%E7%9A%84%E5%90%88%E5%90%8C%402x.png",
          type: 'page',
          url: '/pages/mine/other/delivery-order/list?type=2',
          key: 'delivery-order2',
        },
        {
          label: '我的看房',
          icon: "https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/kanfang.png",
          type: 'page',
          url: '/pages/manager/workOrder/attendant/list'
        },

      ],
      // 业主功能
      ownerTab: [
        {
          label: '业主合同',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E4%B8%9A%E4%B8%BB%E5%90%88%E5%90%8C%402x.png',
          type: 'page',
          url: '/pages/mine/owner/owner-contract/list',
          key: 'owner-contract',
          num: 0
        },
        {
          label: '设施清单',
          icon: "https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%88%91%E7%9A%84%E5%90%88%E5%90%8C%402x.png",
          type: 'page',
          url: '/pages/mine/other/delivery-order/list?type=1',
          key: 'delivery-order1',
          num: 0
        },
        {
          label: '租客合同',
          icon: "https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E7%A7%9F%E5%AE%A2%E5%90%88%E5%90%8C%402x.png",
          type: 'page',
          url: '/pages/mine/owner/tenant-contract/list',
          key: 'tenant-contract',
          num: 0
        },
        {
          label: '业主信息',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E4%B8%9A%E4%B8%BB%E4%BF%A1%E6%81%AF%402x.png',
          type: 'page',
          url: '/pages/mine/owner/owner-info/index'
        },
        {
          label: '业主账单',
          icon: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E4%B8%9A%E4%B8%BB%E8%B4%A6%E5%8D%95%402x.png',
          type: 'page',
          url: '/pages/mine/owner/owner-bill/list'
        }
      ],
      // name: this.$store.state.user.name,
      version: getApp().globalData.config.appInfo.version,
      noteForm: {
        messageContent: '',
      },
      noteRules: {
        messageContent: [
          {required: true, message: '请输入留言内容', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar
    },
    role() {
      return this.$store.state.user.roles;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    },
    ...mapGetters(
        [
          'name'
        ]
    )
  },
  onShow() {
    this.getCount();
    this.getContractNum();
  },
  methods: {
    goto,
    getCount() {
      countOrderState().then(res => {
        let data = res.data;
        this.orderTab.map(item => {
          item.num = data[item.key]
        })
      })
    },
    //获取签订合同数量
    getContractNum() {
      contractCountSign().then(res => {
        console.log('res', res)
        // res['data'] = {
        //   contract: {
        //     '1': 5,
        //     '2': 4,
        //     '3': 8,
        //     '4': 10,
        //     '5': 12
        //   }
        // }
        if (res.data && res.data.contract) {
          let contract = res.data.contract
          //1、业主合同数量
          this.ownerTab.find(item => item.key === 'owner-contract').num = contract['1'] ? contract['1'] : 0
          //2、租客合同数量
          this.ownerTab.find(item => item.key === 'tenant-contract').num = contract['2'] ? contract['2'] : 0
          //3、我的合同数量
          this.tenantTab.find(item => item.key === 'my-contract').num = contract['3'] ? contract['3'] : 0
          //4、设施清单（业主）数量
          this.ownerTab.find(item => item.key === 'delivery-order1').num = contract['4'] ? contract['4'] : 0
          //5、设施清单（租客）数量
          this.tenantTab.find(item => item.key === 'delivery-order2').num = contract['5'] ? contract['5'] : 0
        }
      })
    },
    toOrder(index, item) {
      if (item) {
        if (item.key == '104-107') {
          this.$tab.navigateTo(`/pages/main/order/refundOrderList?index=${index}&orderState=${item.orderState}`)
          return
        }
        this.$tab.navigateTo(`/pages/main/order/list?index=${index}&orderState=${item.orderState}`)
      } else {
        this.$tab.navigateTo('/pages/main/order/list')
      }

    },
    handleClickMenu(item) {
      if (item.type === 'page') {
        this.toUrl(item)
      }
      if (item.type === 'function') {
        this[item.function]()
      }
    },
    //跳转到指定页面
    toUrl(item) {
      if (item.url === 'loginOut') {
        this.$modal.confirm('确定退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/index')
          })
        })
      } else {
        this.$tab.navigateTo(item.url)
      }
    },
    // 留言功能
    showAddMessage() {
      console.log('留言功能')
      this.noteForm.messageContent = ''
      this.$refs.noteDialog.confirm({
        title: '留言',
        showCancel: false,
        onConfirm: () => {
          console.log('onConfirm')
          if (this.noteForm.messageContent.trim() === '') {
            this.$modal.msg('请输入留言内容')
            return
          }
          addProprietorMessage(this.noteForm).then(res => {
            if (res.code === 200) {
              this.$modal.msg(res.msg || '留言成功')
              this.$refs.noteDialog.hide()
            } else {
              this.$modal.msg(res.msg || '留言失败')
            }
          })
        }
      })
    },

    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit')
    },
    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index')
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login')
    },
    handleToAvatar() {
      //this.$tab.navigateTo('/pages/mine/avatar/index')
    },
    handleLogout() {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$tab.reLaunch('/pages/index')
        })
      })
    },
    handleHelp() {
      this.$tab.navigateTo('/pages/mine/help/index')
    },
    handleAbout() {
      this.$tab.navigateTo('/pages/mine/about/index')
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #FFFFFF;
}

.item-box {
  //width: 690rpx;
  background-color: #fff;
  //margin-left: 30rpx;
  //margin-top: 46rpx;
  padding: 0 30rpx;
  margin-bottom: 10rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .fui-btn__contact {
    background: transparent !important;
    position: absolute;
    border: none;
    opacity: 0;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border: 0;
  }


  .left-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 36rpx;
    color: #4E4E4E;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .right-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #111111;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }
}

.order-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20rpx;
  //margin-top: 54rpx;
  padding: 30rpx 0;
  font-weight: 500;
  font-size: 26rpx;
  color: #4E4E4E;
  text-align: center;
  font-style: normal;
  text-transform: none;

  .kefu-wrapper {
    position: relative;
  }

  .state-item {
    .icon-box {
      position: relative;

      .num {
        position: absolute;
        right: -20rpx;
        top: 0;
        background: #FF3E27;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        font-weight: bold;
        font-size: 18rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
        padding: 2rpx 8rpx;
      }
    }
  }
}

.mine-container {
  width: 100%;
  height: 100%;


  .header-section {
    padding: 30rpx;
    color: #fff;
    background: #ffffff;
    margin-bottom: 10rpx;

    .container {
      width: 100%;
      height: 220rpx;
      background: linear-gradient(90deg, #FFC247 0%, #FF885B 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;
      width: 120rpx;
      height: 120rpx;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;
      flex: 1;

      .u_title {
        font-weight: 800;
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 22rpx;
        padding: 20rpx 0;
      }
    }
  }

  .content-section {
    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
</style>